<!DOCTYPE html>
<!--
Copyright 2011 Google Inc. All Rights Reserved.

Use of this source code is governed by a BSD-type license.
See the COPYING file for details.
-->

<style type="text/excss">
  @var fg white;
  @var bg blue;
  #foo {
    color: $fg;
    background-color: $bg;
  }
</style>

<script src="../../excss.js"></script>
<script src="../tests.js"></script>

<div id="foo" expect="color: white; background-color: blue">Foo</div>

<script>
  TESTS.addPhase(function() {
    CSS.vars.fg = "green";
    CSS.vars.bg = "red";
    $("foo").expect("color: green; background-color: red");
  });
  TESTS.addPhase(function() {
    CSS.vars.fg = "pink";
    CSS.vars.bg = "purple";
    $("foo").expect("color: pink; background-color: purple");
  });
  TESTS.addPhase(function() {
    CSS.vars.bg = "white";
    $("foo").expect("color: pink; background-color: white");
  });
</script>
